<template>
  <div class="dashboard-container">
    <!-- 卡片区域   @click="getlist"  @click="reset"-->
    <el-card class="card">
      <el-row>
        <el-form ref="searchref">
          <el-input placeholder="搜索" clearable style="width:200px" class="serch" v-model="queryinfo.title">
          </el-input>
          <el-button type="primary" size="small" icon="el-icon-search" @click="getlist">搜索</el-button>
          <el-button type="primary" size="small" @click="reset">重置</el-button>
        </el-form>
      </el-row>

      <!-- 新增权限组 -->
      <el-row class="add">
        <el-button type="success" icon="el-icon-circle-plus" @click="add">添加</el-button>
      </el-row>

      <!-- alert区域 -->
      <el-alert :title="'一共' + total+ '条记录'" type="info" show-icon :closable='false'>
      </el-alert>

      <!-- 表格区域  @selection-change="handleSelectionChange"-->
      <el-table ref="list" :data="permissionlist" tooltip-effect="dark" style="width: 100%" border>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="用户名" prop="title">
        </el-table-column>

        <!-- 这里有了prop 属性 后面的 sortable才会生效-->
        <el-table-column label="日期" sortable prop="create_date">
          <template slot-scope="scope">
            <!--  -->
            {{scope.row.create_date | parseTimeByString}}
          </template>
        </el-table-column>

        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryinfo.page" :page-sizes="[3, 5, 10, 15]" :page-size="queryinfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>

    <!-- 添加用户的模态框 -->
    <el-dialog title="创建权限组" :visible.sync="isadd" width="50%">
      <el-form :model="addfrom" :rules="rules" ref="addFormref" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="title">
          <el-input v-model="addfrom.title"></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <!-- 树形组件 -->
          <el-tree :data="treelist" :props="defaultProps" show-checkbox node-key="id" ref="tree"></el-tree>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isadd = false">取 消</el-button>
        <el-button type="primary" @click="addsure">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑用户权限组 -->
    <el-dialog title="编辑权限组" :visible.sync="isedit" width="50%">
      <el-form :model="editfrom" :rules="rules" ref="editFormref" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="title">
          <el-input v-model="editfrom.title"></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <!-- 树形组件 -->
          <el-tree :data="treelist" :props="defaultProps" show-checkbox node-key="id" ref="edittree"></el-tree>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isedit = false">取 消</el-button>
        <el-button type="primary" @click="editsure">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<style lang="scss" scoped>
</style>

<script>
import { list as permissionlist, add, remove, detail, update } from '../../api/base/permissions' // 获取用户权限列表
import { list as menulist } from '../../api/base/menus'
import { parseTimeByString } from '../../filters/index' // 导入时间过滤器函数
export default {
  data () {
    return {
      total: 0, // 总的数据条数

      queryinfo: { // 获取数据的时候查询参数
        page: 1,
        pagesize: 5,
        keyword: '',
        title: ''
      },
      // 添加用户的时候的对象
      addfrom: {
        title: '',
        permissions: []
      },

      editfrom: {
        id: 0,
        title: '',
        permissions: []
      },
      permissionlist: [], // 权限列表数组
      isadd: false, //  用来控制添加数据的模态框是否显示
      isedit: false, // 用来控制编辑用户的模态框是否显示

      rules: { // 验证规则
        title: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      },
      treelist: [], // 树形组件
      defaultProps: { // 树形组件的参数
        label: 'title',
        children: 'points'
      }

    }
  },
  created () {
    this.getlist()
  },
  methods: {
    // 获取权限组列表
    getlist () {
      permissionlist(this.queryinfo)
        .then(res => {
          // console.log(res)
          // 判断一下 是否获取成功
          if (res.status !== 200) {
            return this.$message.error('获取权限列表失败')
          }
          this.$message.success('获取权限列表成功')
          this.total = res.data.counts
          this.permissionlist = res.data.list
        })
    },
    handleSizeChange (newsize) { // 当每页显示多少条数据的时候 让queryinfo 里面的数据跟着改变
      this.queryinfo.pagesize = newsize
      this.getlist()
    },
    handleCurrentChange (newnum) {
      this.queryinfo.page = newnum
      this.getlist()
    },
    // 点击后重置 输入框
    reset () {
      this.queryinfo.title = ''
      this.getlist()
    },

    // 点击添加按钮 并获取树形控件里面的数据
    add () {
      this.gettreelist()
      this.isadd = true
    },
    async edit (userinfo) {
      this.gettreelist()
      console.log(userinfo)
      this.isedit = true
      this.editfrom.id = userinfo.id
      const { data: res } = await detail(userinfo)
      console.log(res)
      this.editfrom.title = res.title
      this.editfrom.permissions = res.permissions
      //  通过key 值去设置
      console.log(res.permissions)
      this.$refs.edittree.setCheckedKeys(res.permissions)
    },

    // 获取树形控件里面的数据
    async gettreelist () {
      const { data: res } = await menulist()
      // console.log(res)
      this.treelist = res
      // 这里子节点里面的节点不统一 所以需要修改一下
      this.treelist.forEach(item => {
        item.points = item.childs
      })
      // console.log(this.treelist)
    },

    // 点击后添加这个用户想选 先把id保存到对应的数据 中 再发送请求
    async addsure () {
      this.addfrom.permissions = this.$refs.tree.getCheckedKeys()
      // console.log(this.addfrom.permissions)
      const { data: res } = await add(this.addfrom)
      console.log(res)
      this.getlist()
      //  添加完后 要把表单清空掉
      this.addfrom.title = ''
      this.addfrom.permissions = []
      this.isadd = false
      this.$message.success('添加成功')
    },
    async editsure () {
      this.editfrom.permissions = this.$refs.edittree.getCheckedKeys()
      if (this.editfrom.permissions.length === 0) {
        return this.$message.error('权限列表不能为空')
      }
      const { data: res } = await update(this.editfrom)
      console.log(res)
      this.isedit = false
      this.$message.success('编辑权限成功')
    },

    // 点击删除一个用户
    del (userinfo) {
      console.log(userinfo)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await remove(userinfo)
        console.log(res)

        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getlist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

  },
  filters: {
    parseTimeByString
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin: 15px;
}
.add {
  float: right;
  margin: 10px;
}
</style>
